<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程列表</title>
    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet" href="./libs/css/frozenui.css">
    <link rel="stylesheet" href="./assets/css/common.css">
    <link rel="stylesheet" href="./assets/css/class.css">
</head>

<body>
    <div class="container">
        <header>
            <div class="header content">
                <h2 class="pull-left">课程</h2>
                <a href="" class="pull-right sousuo">
                    <img src="./assets/images/sousuo.png" alt="">
                </a>
                <div class="clearfix"></div>
            </div>
        </header>

        <!-- 选项卡 -->
        <section id="tab">
            <div class="demo-item class-item">
                <div class="demo-block">
                    <div class="ui-tab">
                        <ul class="ui-tab-nav ui-border-b">
                            <li class="current"><span>教师资格</span></li>
                            <li><span>教师招聘</span></li>
                            <li><span>特岗教师</span></li>
                        </ul>
                        <ul class="ui-tab-content" style="width:300%">
                            <li>
                                <div class="list">
                                    <h3 class="clearfix">
                                        <span>面试</span> 2019安徽教师资格模拟卷综合知识
                                    </h3>
                                    <p class="time">2019.04.07-2019.08.23</p>
                                    <div class="bottom clearfix">
                                        <dl class="pull-left">
                                            <dd>
                                                <img src="./assets/images/t_photo1.png" alt="">
                                                <p>高亮</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo2.png" alt="">
                                                <p>胡彬</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo3.png" alt="">
                                                <p>李茹</p>
                                            </dd>
                                        </dl>
                                        <div class="pull-right right">
                                            <p>￥<span>890</span>起</p>
                                            <p>已有2367人购买</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="list">
                                    <h3 class="clearfix">
                                        <span>面试</span> 2019安徽教师资格模拟卷综合知识
                                    </h3>
                                    <p class="time">2019.04.07-2019.08.23</p>
                                    <div class="bottom clearfix">
                                        <dl class="pull-left">
                                            <dd>
                                                <img src="./assets/images/t_photo1.png" alt="">
                                                <p>高亮</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo2.png" alt="">
                                                <p>胡彬</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo3.png" alt="">
                                                <p>李茹</p>
                                            </dd>
                                        </dl>
                                        <div class="pull-right right">
                                            <p>￥<span>890</span>起</p>
                                            <p>已有2367人购买</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="list">
                                    <h3 class="clearfix">
                                        <span>面试</span> 2019安徽教师资格模拟卷综合知识
                                    </h3>
                                    <p class="time">2019.04.07-2019.08.23</p>
                                    <div class="bottom clearfix">
                                        <dl class="pull-left">
                                            <dd>
                                                <img src="./assets/images/t_photo1.png" alt="">
                                                <p>高亮</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo2.png" alt="">
                                                <p>胡彬</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo3.png" alt="">
                                                <p>李茹</p>
                                            </dd>
                                        </dl>
                                        <div class="pull-right right">
                                            <p>￥<span>890</span>起</p>
                                            <p>已有2367人购买</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="list">
                                    <h3 class="clearfix">
                                        <span>面试</span> 2019安徽教师资格模拟卷综合知识
                                    </h3>
                                    <p class="time">2019.04.07-2019.08.23</p>
                                    <div class="bottom clearfix">
                                        <dl class="pull-left">
                                            <dd>
                                                <img src="./assets/images/t_photo1.png" alt="">
                                                <p>高亮</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo2.png" alt="">
                                                <p>胡彬</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo3.png" alt="">
                                                <p>李茹</p>
                                            </dd>
                                        </dl>
                                        <div class="pull-right right">
                                            <p>￥<span>890</span>起</p>
                                            <p>已有2367人购买</p>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="list">
                                    <h3 class="clearfix">
                                        <span>面试</span> 2019安徽教师资格模拟卷综合知识
                                    </h3>
                                    <p class="time">2019.04.07-2019.08.23</p>
                                    <div class="bottom clearfix">
                                        <dl class="pull-left">
                                            <dd>
                                                <img src="./assets/images/t_photo1.png" alt="">
                                                <p>高亮</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo2.png" alt="">
                                                <p>胡彬</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo3.png" alt="">
                                                <p>李茹</p>
                                            </dd>
                                        </dl>
                                        <div class="pull-right right">
                                            <p>￥<span>890</span>起</p>
                                            <p>已有2367人购买</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="list">
                                    <h3 class="clearfix">
                                        <span>面试</span> 2019安徽教师资格模拟卷综合知识
                                    </h3>
                                    <p class="time">2019.04.07-2019.08.23</p>
                                    <div class="bottom clearfix">
                                        <dl class="pull-left">
                                            <dd>
                                                <img src="./assets/images/t_photo1.png" alt="">
                                                <p>高亮</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo2.png" alt="">
                                                <p>胡彬</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo3.png" alt="">
                                                <p>李茹</p>
                                            </dd>
                                        </dl>
                                        <div class="pull-right right">
                                            <p>￥<span>890</span>起</p>
                                            <p>已有2367人购买</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="list">
                                    <h3 class="clearfix">
                                        <span>面试</span> 2019安徽教师资格模拟卷综合知识
                                    </h3>
                                    <p class="time">2019.04.07-2019.08.23</p>
                                    <div class="bottom clearfix">
                                        <dl class="pull-left">
                                            <dd>
                                                <img src="./assets/images/t_photo1.png" alt="">
                                                <p>高亮</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo2.png" alt="">
                                                <p>胡彬</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo3.png" alt="">
                                                <p>李茹</p>
                                            </dd>
                                        </dl>
                                        <div class="pull-right right">
                                            <p>￥<span>890</span>起</p>
                                            <p>已有2367人购买</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="list">
                                    <h3 class="clearfix">
                                        <span>面试</span> 2019安徽教师资格模拟卷综合知识
                                    </h3>
                                    <p class="time">2019.04.07-2019.08.23</p>
                                    <div class="bottom clearfix">
                                        <dl class="pull-left">
                                            <dd>
                                                <img src="./assets/images/t_photo1.png" alt="">
                                                <p>高亮</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo2.png" alt="">
                                                <p>胡彬</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo3.png" alt="">
                                                <p>李茹</p>
                                            </dd>
                                        </dl>
                                        <div class="pull-right right">
                                            <p>￥<span>890</span>起</p>
                                            <p>已有2367人购买</p>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="list">
                                    <h3 class="clearfix">
                                        <span>面试</span> 2019安徽教师资格模拟卷综合知识
                                    </h3>
                                    <p class="time">2019.04.07-2019.08.23</p>
                                    <div class="bottom clearfix">
                                        <dl class="pull-left">
                                            <dd>
                                                <img src="./assets/images/t_photo1.png" alt="">
                                                <p>高亮</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo2.png" alt="">
                                                <p>胡彬</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo3.png" alt="">
                                                <p>李茹</p>
                                            </dd>
                                        </dl>
                                        <div class="pull-right right">
                                            <p>￥<span>890</span>起</p>
                                            <p>已有2367人购买</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="list">
                                    <h3 class="clearfix">
                                        <span>面试</span> 2019安徽教师资格模拟卷综合知识
                                    </h3>
                                    <p class="time">2019.04.07-2019.08.23</p>
                                    <div class="bottom clearfix">
                                        <dl class="pull-left">
                                            <dd>
                                                <img src="./assets/images/t_photo1.png" alt="">
                                                <p>高亮</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo2.png" alt="">
                                                <p>胡彬</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo3.png" alt="">
                                                <p>李茹</p>
                                            </dd>
                                        </dl>
                                        <div class="pull-right right">
                                            <p>￥<span>890</span>起</p>
                                            <p>已有2367人购买</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="list">
                                    <h3 class="clearfix">
                                        <span>面试</span> 2019安徽教师资格模拟卷综合知识
                                    </h3>
                                    <p class="time">2019.04.07-2019.08.23</p>
                                    <div class="bottom clearfix">
                                        <dl class="pull-left">
                                            <dd>
                                                <img src="./assets/images/t_photo1.png" alt="">
                                                <p>高亮</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo2.png" alt="">
                                                <p>胡彬</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo3.png" alt="">
                                                <p>李茹</p>
                                            </dd>
                                        </dl>
                                        <div class="pull-right right">
                                            <p>￥<span>890</span>起</p>
                                            <p>已有2367人购买</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="list">
                                    <h3 class="clearfix">
                                        <span>面试</span> 2019安徽教师资格模拟卷综合知识
                                    </h3>
                                    <p class="time">2019.04.07-2019.08.23</p>
                                    <div class="bottom clearfix">
                                        <dl class="pull-left">
                                            <dd>
                                                <img src="./assets/images/t_photo1.png" alt="">
                                                <p>高亮</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo2.png" alt="">
                                                <p>胡彬</p>
                                            </dd>
                                            <dd>
                                                <img src="./assets/images/t_photo3.png" alt="">
                                                <p>李茹</p>
                                            </dd>
                                        </dl>
                                        <div class="pull-right right">
                                            <p>￥<span>890</span>起</p>
                                            <p>已有2367人购买</p>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <nav>
        <div class="nav">
            <ul>
                <!-- 父标签设置弹性布局 -->
                <li>
                    <!-- li标签可以比作div盒子标签 -->
                    <a href="index.html">
                        <img src="./assets/images/home.png" alt="">
                        <p>首页</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/dianbo.png" alt="">
                        <p>点播</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/question.png" alt="">
                        <p>题目</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/live.png" alt="">
                        <p>直播</p>
                    </a>
                </li>
                <li>
                    <a href="my1.html">
                        <img src="./assets/images/my_hover.png" alt="">
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

    <script src="./libs/js/zepto.min.js"></script>
    <script>
        (function() {
            var record = 0;
            var origin_l;
            $('.ui-tab-nav').eq(0).find('li').on('click', function() {
                //记录原始点的位置:
                //   if(!record){
                //       origin_l = $('.ui-tab-nav li.current i').offset().left;
                //       record++;
                //   }
                $(this).parent().find('li').removeClass('current');
                $(this).addClass('current');
                //   var l = $(this).find('span').offset().left;
                //   var w = $(this).find('span').offset().width;
                //   $('.ui-tab-nav li.current i').css({
                //       'transform':'translate3d('+(l-origin_l)+'px,0,0)',
                //       'width':w,
                //       'transition':'transform 0.5s linear'
                //   });
                $('.ui-tab-content').eq(0).css({
                    'transform': 'translate3d(-' + ($(this).index() * $('.ui-tab-content li').offset().width) + 'px,0,0)',
                    'transition': 'transform 0.5s linear'
                })
            });

        })(window, undefined)
    </script>
</body>

</html>